<template>
    <div v-if="productItem">
        <common-banner :name="productItem.category.name" :breads="breads"></common-banner>
        <div class="page-center">
            <div class="detail-container mt-20 mb-20">
                <div class="left-section">
                    <img :src="productItem.img" :alt="productItem.name" />
                </div>
                <div class="right-section">
                    <h2>{{ productItem.name }}</h2>
                    <div class="detail-text">
                        <p><span class="attr">货号:</span>{{ productItem.productNo }}</p>
                        <p><span class="attr">品名:</span>{{ productItem.name }}</p>
                        <p><span class="attr">英文品名:</span>{{ productItem.englishName }}</p>
                        <p><span class="attr">CAS#:</span>{{ productItem.cas }}</p>
                        <p><span class="attr">分子式:</span>{{ productItem.formula }}</p>
                        <p><span class="attr">分子量:</span>{{ productItem.weight }}</p>
                    </div>
                    <div class="message">
                        <el-button plain @click="showLeaveMessage = true">在线留言</el-button>
                        <leave-message
                            :dialog-visible="showLeaveMessage"
                            v-if="showLeaveMessage"
                            @cancel="showLeaveMessage = false"
                        ></leave-message>
                    </div>
                </div>
            </div>

            <h2 class="related">相关产品</h2>
            <div class="page-center">
                <div class="swiper-container swiper-product-detail">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide" v-for="(item, index) in productItem.category.list" :key="index">
                            <div class="product-card">
                                <a :href="`/product-detail?id=${item.id}`">
                                    <img :src="item.imageUrl" :alt="item.name" />
                                    <h3 class="title">{{ item.name }}</h3></a
                                >
                                <div class="details">
                                    <p>货号：{{ item.productId }} CAS号：{{ item.casNo }}</p>
                                    <p>分子式：{{ item.formula }} 分子量：{{ item.molecularWeight }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-button-prev" @click="priveSlide"></div>
                    <div class="swiper-button-next" @click="nextSlide"></div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.min.css'
import CommonBanner from '@/components/CommonBanner.vue'
import LeaveMessage from '@/components/LeaveMessage.vue'

const prodcutDetailSwiper = ref(null)

onMounted(() => {
    prodcutDetailSwiper.value = new Swiper('.swiper-product-detail', {
        slidesPerView: 4,
        slidesPerGroup: 1,
        slidesBetween: 0,
        autoplay: 3000,
        loop: true,
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    })
})

const priveSlide = () => {
    prodcutDetailSwiper.value.slidePrev()
}
const nextSlide = () => {
    prodcutDetailSwiper.value.slideNext()
}

const showLeaveMessage = ref(false)
const breads = ref([{ name: 'product', label: '产品中心', to: true }])
// TODO 从接口获取
const productItem = ref({
    id: 1,
    productNo: 'T18489',
    category: {
        id: 1,
        name: '阿比特龙',
        list: [
            {
                id: 1,
                name: '依托考昔杂质14',
                imageUrl: 'https://www.sincopharmachem.com.cn/Images/product/A18443.jpg',
                productId: 'E02291',
                casNo: '855307-79-8',
                formula: 'C18H13ClN2O2S',
                molecularWeight: '356.82',
            },
            {
                id: 2,
                name: '依托考昔杂质15',
                imageUrl: 'https://www.sincopharmachem.com.cn/Images/product/A18443.jpg',
                productId: 'E02291',
                casNo: '855307-79-8',
                formula: 'C18H13ClN2O2S',
                molecularWeight: '356.82',
            },
            {
                id: 3,
                name: '依托考昔杂质16',
                imageUrl: 'https://www.sincopharmachem.com.cn/Images/product/A18443.jpg',
                productId: 'E02291',
                casNo: '855307-79-8',
                formula: 'C18H13ClN2O2S',
                molecularWeight: '356.82',
            },
            {
                id: 4,
                name: '依托考昔杂质17',
                imageUrl: 'https://www.sincopharmachem.com.cn/Images/product/A18443.jpg',
                productId: 'E02291',
                casNo: '855307-79-8',
                formula: 'C18H13ClN2O2S',
                molecularWeight: '356.82',
            },
            {
                id: 5,
                name: '依托考昔杂质18',
                imageUrl: 'https://www.sincopharmachem.com.cn/Images/product/A18443.jpg',
                productId: 'E02291',
                casNo: '855307-79-8',
                formula: 'C18H13ClN2O2S',
                molecularWeight: '356.82',
            },
        ],
    },
    name: '托吡卡胺EP杂质B（旋转异构体混合物）',
    englishName: 'Tropicamide EP Impurity B(Mixture of Rotamers)',
    cas: '57322-50-6',
    formula: 'C17H18N2O',
    weight: 266.34,
    img: 'https://www.sincopharmachem.com.cn/Images/product/A18443.jpg',
})
document.title = productItem.value.name
</script>
<style lang="scss" scoped>
.detail-container {
    &::after {
        content: '';
        display: block;
        clear: both;
    }
    .left-section {
        float: left;
        border: 1px solid #efefef;
        width: 49%;
    }

    .right-section {
        float: right;
        width: 49%;
        h2 {
            font-size: 28px;
            color: #000;
        }

        .detail-text {
            line-height: 36px;
            font-size: 16px;
            font-family: 'SimSun';
            color: #666;
        }

        p {
            padding: 10px 0;
            border-bottom: 1px solid #eee;
        }

        .attr {
            display: inline-block;
            color: #000;
            width: 100px;
            font-size: 16px;
            font-weight: 800;
        }

        .message {
            margin-top: 20px;

            .el-button {
                width: 170px;
                height: 50px;
                color: #fff;
                background: #0d87dc;
                border-radius: 0;
                border: none;
                &:hover {
                    background: #993b2f;
                }
            }
        }
    }
}

.related {
    margin-bottom: 20px;
    padding: 20px 0;
    text-align: center;
    text-transform: uppercase;
    font-size: 2em;
    font-weight: bold;
    color: #000;
    border-bottom: 1px solid #eee;
}

.product-card {
    border-right: 1px solid #eee;
    padding: 15px;
    background: #fff;
    transition: all 0.3s;
    margin-bottom: 50px;

    &:hover {
        border-color: rgb(0, 167, 225);
        img {
            transform: scale(1.1);
        }
    }

    img {
        width: 100%;
        height: auto;
        display: block;
        margin-bottom: 10px;
    }

    .contact-info {
        margin: 10px 0;
        color: #999;
        font-size: 12px;
        text-align: center;

        span {
            margin-right: 15px;
        }
    }

    .title {
        margin: 10px 0;
        color: #0d87dc;
        text-align: center;
        font-size: 16px;
        line-height: 1.4;
    }

    .details {
        color: #666;
        font-size: 14px;
        line-height: 1.6;

        p {
            margin: 5px 0;
        }
    }
}
</style>
